{% extends 'cms/base.html' %}
{% load cms_filters %}
{% block title %}新闻列表{% endblock %}
{% block content-header %}
<h3>新闻列表管理</h3>
<link rel="stylesheet" href="{% static 'css/cms/news_list.min.css' %}">
<link rel="stylesheet" href="{% static 'adminlte/plugins/daterangepicker/daterangepicker.css' %}">
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'adminlte/plugins/daterangepicker/daterangepicker.css' %}">

{% endblock %}
{% block content %}
<div class="row">
    <div class="col-md-12">
        <div class="box-header">
            <form action="{% url 'cms:news_list' %}" class="form-inline" method="get">
                <div class="form-group head-left-group">
                    <label class="">日期:</label>

                    <div class="input-group">
                        {% if daterange %}
                        <input type="text" class="form-control float-left" id="reservation" name="daterange" placeholder="YYYY/MM/DD - YYYY/MM/DD" value="{{ daterange }}">
                        {% else %}
                        <input type="text" class="form-control float-left" id="reservation" name="daterange" placeholder="YYYY/MM/DD - YYYY/MM/DD">
                        {% endif %}
                    </div>
                </div>
                <div class="form-group head-left-group">
                    <label for="title-input">标题：</label>
                    {% if title %}
                    <input type="text" class="form-control" name="title" id="title-input" placeholder="关键字" value="{{ title }}">
                    {% else %}
                    <input type="text" class="form-control" name="title" id="title-input" placeholder="关键字">
                    {% endif %}
                </div>
                <div class="form-group head-left-group">
                    <label for="title-input">分类：</label>
                    <select name="category" id="" class="form-group">
                        {% if category_id == 0 %}
                            <option value="0" selected>所有分类</option>
                        {% else %}
                            <option value="0" >所有分类</option>
                        {% endif %}
                        {% for category in categories %}
                            {% if category_id == category.id %}
                                <option value="{{ category.id }}" selected>{{ category.name }}</option>
                            {% else %}
                                <option value="{{ category.id }}">{{ category.name }}</option>
                            {% endif %}
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group head-left-group">
                    <button class="btn btn-primary">查询</button>
                </div>
                <div class="form-group head-left-group">
                    <a href="{% url 'cms:news_list' %}">清除查询</a>
                </div>
            </form>
        </div>
        <div class="box box-margin-top">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>标题</th>
                        <th>分类</th>
                        <th>发布时间</th>
                        <th>作者</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for news in all_news %}
                    <tr>
                        <td><a href="{% url 'news:news_detail' news_id=news.id %} ">{{ news.title }}</a></td>
                        <td>{{ news.category.name }}</td>
                        <td>{{ news.pub_time|time_format }}</td>
                        <td>{{ news.author.username }}</td>
                        <td>
                            <a class="btn btn-info btn-xs" href="{% url 'cms:edit_news' %}?news_id={{ news.id }}">编辑</a>
                            <button class="btn btn-danger btn-xs delete-btn"  news_id="{{ news.id }}">删除</button>
                        </td>
                    </tr>
                    {% endfor%}
                </tbody>
            </table>
        </div>
        <div class="box-footer">
            <p class="float-left">第{{ current_page }}页/共{{num_pages}}页</p>
            <ul class="pagination float-right">

                {# 上一页 #}
                {% if page_obj.has_previous %}
                <li><a href="?p={{ page_obj.previous_page_number }}{{ url_query }}"> 上一页</a></li>
                {% else %}
                <li class="disabled"><a href="javascript:void(0);">上一页</a></li>
                {% endif %}

                {% if left_has_more %}
                <li><a href="?p=1">1</a></li>
                <li><a href="javascript:void(0);">...</a></li>
                {% endif %}

                {# 左边的页码 #}
                {% for left_page in left_pages %}
                <li><a href="?p={{ left_page }}{{ url_query }}">{{ left_page }}</a></li>
                {% endfor %}


                {# 当前的页码 #}
                <li><a href="?p={{ current_page }}{{ url_query }}">{{ current_page }}</a></li>


                {# 右边的页码 #}
                {% for right_page in right_pages %}
                <li><a href="?p={{ right_page }}{{ url_query }}">{{ right_page }}</a></li>
                {% endfor %}

                {% if right_has_more %}
                <li><a href="javascript:void(0);">...</a></li>
                <li><a href="?p={{ num_pages }}{{ url_query }}">{{ num_pages }}</a></li>
                {% endif %}

                {# 下一页 #}
                {% if page_obj.has_next %}
                <li><a href="?p={{ page_obj.next_page_number }}{{ url_query }}"> 下一页</a></li>
                {% else %}
                <li class="disabled"><a href="javascript:void(0);">下一页</a></li>
                {% endif %}
            </ul>
        </div>
    </div>

</div>
<script src="{% static 'adminlte/plugins/daterangepicker/moment.min.js' %}"></script>
<script src="{% static 'adminlte/plugins/daterangepicker/daterangepicker.js' %}"></script>
<script src="{% static 'js/news_list.min.js' %}"></script>
{% endblock %}